{% extends 'customer_dashboard.html' %}

{% block content %}
<style>
  .center-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: calc(100vh - 100px);
    padding-top: 60px;
    padding-bottom: 40px;
  }

  .card {
    background-color: #f5f9ff;
    padding: 30px 40px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    max-width: 700px;
    width: 100%;
  }

  .card h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 10px;
  }

  .card p.subtext {
    text-align: center;
    color: #555;
    margin-bottom: 20px;
  }

  .form-group {
    margin-bottom: 20px;
  }

  .form-group label {
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
  }

  select,
  input[type="number"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 15px;
    transition: border 0.3s;
  }

  select:focus,
  input:focus {
    outline: none;
    border-color: #3399ff;
    box-shadow: 0 0 6px rgba(51, 153, 255, 0.4);
  }

  .btn-group {
    text-align: center;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 20px;
  }

  .btn {
    background-color: #3399ff;
    color: #fff;
    padding: 10px 24px;
    font-size: 15px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.3s;
  }

  .btn:hover {
    background-color: #267cd6;
  }

  .btn-secondary {
    background-color: #6c757d;
  }

  .btn-secondary:hover {
    background-color: #5a6268;
  }

  .message {
    text-align: center;
    margin: 15px 0;
    font-weight: bold;
  }
</style>

<div class="center-wrapper">
  <div class="card">
    <h2><i class="bi bi-piggy-bank"></i> 存款操作</h2>
    <p class="subtext">请选择要存款的银行卡并填写金额：</p>

    {% if message %}
      <p class="message" style="color: {{ 'green' if success else 'red' }};">{{ message }}</p>
    {% endif %}

    <form method="POST">
      <div class="form-group">
        <label for="cardID"><i class="bi bi-credit-card"></i> 选择银行卡：</label>
        <select name="cardID" id="cardID" required>
          <option value="">-- 请选择卡号 --</option>
          {% for card in cards %}
          <option value="{{ card.cardID }}"
            {% if request.form.get('cardID') == card.cardID %}selected{% endif %}
            {% if card.lost %}disabled{% endif %}>
            {{ card.cardID }} - {{ card.savingName }} - 余额: {{ "%.2f"|format(card.balance) }}{% if card.lost %}（已挂失）{% endif %}
          </option>
          {% endfor %}
        </select>
      </div>

      <div class="form-group">
        <label for="amount"><i class="bi bi-cash-coin"></i> 存入金额：</label>
        <input type="number" step="0.01" min="0.01" name="amount" id="amount" placeholder="请输入存款金额" required>
      </div>

      <div class="btn-group">
        <button type="submit" class="btn">确认存款</button>
        <a href="{{ url_for('customer.balance') }}" class="btn btn-secondary">返回</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}
